<template>
  <div class="login-page">
    <div class="card">
      <div class="card-item">
        <div class="title font-24">请登录</div>
        <div class="user-info">
          <div class="item-input">
            <n-input
              maxlength="50"
              v-model:value="account"
              type="text"
              size="large"
              placeholder="用户名/手机号"
            />
          </div>
          <div class="item-input">
            <n-input
              maxlength="50"
              v-model:value="password"
              size="large"
              type="password"
              show-password-on="mousedown"
              placeholder="密码"
            />
          </div>
        </div>
        <div class="btn-box">
          <n-button
            type="primary"
            :loading="loading"
            class="btn-item bg-blue"
            @click="loginFun(false)"
          >
            登录
          </n-button>
        </div>
        <div class="btn-box mt">
          <n-button
            type="primary"
            :loading="loading1"
            ghost
            class="btn-item"
            @click="loginFun(true)"
          >
            游客模式
          </n-button>
        </div>
      </div>
      <div class="card-item1">
        <div class="title font-24 margin-bot30">
          <div>产品信息</div>
        </div>
        <div class="label-item">
          <div class="label-txt">产品名称</div>
          <div class="label-input">
            <n-input
              maxlength="50"
              readonly
              v-model:value="productInfo.productName"
              type="text"
              placeholder=""
            />
          </div>
        </div>
        <div class="label-item">
          <div class="label-txt">产品版本号</div>
          <div class="label-input">
            <n-input
              maxlength="50"
              readonly
              v-model:value="productInfo.productVersion"
              type="text"
              placeholder=""
            />
          </div>
        </div>
        <div class="title font-24 margin-bot30 margin-top40">公司信息</div>
        <div class="logo-box">
          <div class="label-txt">公司LOGO</div>
          <div class="logo-div">
            <img class="companyLogo" :src="productInfo.companyLogo" alt="" />
          </div>
        </div>
        <div class="label-item">
          <div class="label-txt">公司名称</div>
          <div class="label-input">
            <n-input
              maxlength="50"
              readonly
              v-model:value="productInfo.companyName"
              type="text"
              placeholder="请输入公司名称"
            />
          </div>
        </div>
        <div class="title font-24 margin-bot30 margin-top40">其他信息</div>
        <div
          v-for="(item, i) in productInfo.otherInfoData"
          :key="i"
          class="label-item"
        >
          <div class="label-txt">{{ item.key }}</div>
          <div class="label-input">
            <n-input
              maxlength="50"
              readonly
              v-model:value="item.value"
              type="text"
              placeholder="请输入产品名称"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref, onMounted, reactive } from "vue";
import { useRouter } from "vue-router";
import { UserLogin, GetSingleUserInfo, GetMdsInfomation } from "@/server"; //导入登录函数
import { useAppStore } from "@/store/modules/user";

const store = useAppStore();
const router = useRouter();
const loading = ref(false);
const loading1 = ref(false);
// const message = useMessage();
const account = ref(""); //登录账号名
const password = ref(""); //登录密码
// addUser();
/**
 * @description: 登录接口调用示例
 * @return {*}
 * @author: cool panda
 */
const loginFun = async (type: boolean) => {
  const params: any = {};
  if (type) {
    params.account = "visitor"; //用户名
    params.password = "tric123"; //登录密码
    loading1.value = true;
  } else {
    if (!account.value || !password.value) {
      // message.warning("账号或者密码不能为空");
      return false;
    }
    params.account = account.value; //用户名
    params.password = password.value; //登录密码
    loading.value = true;
  }
  const res: any = await UserLogin(params);
  if (res.result.isSuccess) {
    loading.value = false;
    loading1.value = false;
    console.log("登录成功");
    store.setToken(res.result.result);
    GetSingleUserInfoFun();
    toPage("/");
  } else {
    loading.value = false;
    loading1.value = false;
    store.error(res.result.message); // 错误提示
  }
};
//获取用户信息
const GetSingleUserInfoFun = async () => {
  const res: any = await GetSingleUserInfo();
  if (res.result.isSuccess) {
    store.setUserInfo(res.result.result);
  } else {
    store.error(res.result.message); // 错误提示
  }
};
const productInfo = ref({
  productName: "",
  productVersion: "",
  companyLogo: "",
  companyName: "",
  otherInfo: "",
}) as any;
const GetMdsInfomationFun = async () => {
  const res: any = await GetMdsInfomation({});
  if (res.result.isSuccess) {
    const result = res.result.result;
    if (result) {
      productInfo.value = result;
    }
  } else {
    store.error(res.result.message); // 错误提示
  }
};
GetMdsInfomationFun();
/**
 * @description: 页面跳转实例
 * @param {*} url
 * @return {*}
 * @author: cool panda
 */
const toPage = (url: string) => {
  router.push(url);
};
onMounted(() => {
  console.log("dom构建完成");
});

const showModal = ref(false);
//点击编辑
const clickEdit = () => {
  showModal.value = true;
};
</script>

<style lang="less" scoped>
.login-page {
  width: 100%;
  height: calc(100vh - 88px);
  padding: 0 10px;
  background-color: #5d6a73;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;

  :deep(.n-input) {
    --n-color: rgba(57, 66, 72, 1) !important;
    --n-color-focus: rgba(57, 66, 72, 1) !important;
    --n-text-color: rgb(255, 255, 255) !important;
    --n-placeholder-color: rgba(255, 255, 255, 0.2) !important;
    --n-border-hover: 1px solid #02a8ae !important;
    --n-border-focus: 1px solid #02a8ae !important;
    --n-border: 1px solid rgba(255, 255, 255, 0.2) !important;
  }

  :deep(.n-upload) {
    --n-dragger-color: rgba(57, 66, 72, 1) !important;
    --n-dragger-border-hover: 1px dashed rgba(2, 168, 174, 1) !important;
  }

  .card {
    display: flex;
    justify-content: center;
    width: 100%;

    .card-item {
      width: 497px;
      height: 680px;
      font-size: 16px;
      color: #fff;
      padding: 25px 35px;
      background-color: #394248;
      margin-right: 10px;

      .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #02a8ae;
        // text-align: left;
      }

      .font-24 {
        font-size: 24px;
      }

      .font-16 {
        font-size: 16px;
      }

      .margin-bot30 {
        margin-bottom: 30px;
      }

      .margin-top40 {
        margin-top: 40px;
      }

      .user-info {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 130px 0 80px 0;

        .item-input {
          width: calc(100% - 60px);
          height: 60px;

          :deep(.n-input) {
            width: 100%;
            text-align: left;
            --n-color: #fff !important;
            --n-color-focus: #fff !important;
            --n-text-color: rgb(0, 0, 0) !important;
            --n-placeholder-color: #394248 !important;
          }

          margin-bottom: 30px;
        }
      }
      .mt {
        margin-top: 20px;
      }
      .btn-box {
        display: flex;
        flex-direction: column;
        align-items: center;

        .btn-item {
          cursor: pointer;
          width: 277px;
          height: 50px;
          line-height: 50px;
          text-align: center;
          margin-bottom: 30px;
        }

        .btn-item:last-child {
          margin-bottom: 0;
        }

        .bg-blue {
          background: #02a8ae;
        }
      }

      .label-item {
        display: flex;
        align-items: center;
        height: 35px;
        margin-bottom: 20px;

        .label-txt {
          width: 100px;
          text-align: left;
          margin-right: 10px;
        }

        .label-input {
          flex: 1;

          :deep(.n-input__input) {
            text-align: left !important;
          }
        }
      }

      .label-item:last-child {
        margin-bottom: 0;
      }

      .logo-box {
        display: flex;
        margin-bottom: 25px;

        .label-txt {
          width: 100px;
          text-align: left;
          margin-right: 10px;
        }
      }

      .search-box {
        display: flex;
        justify-content: space-between;
        height: 35px;
        margin-bottom: 20px;

        .add-btn {
          font-size: 14px;
          color: #fff;
          background-color: #01c0e4;
          margin-left: 30px;
        }
      }
    }
    .card-item1 {
      width: 497px;
      height: 680px;
      color: #fff;
      padding: 25px;
      background-color: #394248;
      margin-right: 10px;

      .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #02a8ae;
        // text-align: left;
      }

      .font-24 {
        font-size: 24px;
      }

      .font-16 {
        font-size: 16px;
      }

      .margin-bot30 {
        margin-bottom: 20px;
      }

      .margin-top40 {
        margin-top: 30px;
      }

      .user-info {
        display: flex;
        flex-direction: column;
        margin: 66px 0 180px 0;

        .user-name {
          margin-top: 30px;
        }
      }

      .btn-box {
        display: flex;
        flex-direction: column;
        align-items: center;

        .btn-item {
          width: 277px;
          height: 50px;
          line-height: 50px;
          text-align: center;
          margin-bottom: 30px;
        }

        .btn-item:last-child {
          margin-bottom: 0;
        }

        .bg-blue {
          background: #02a8ae;
        }

        .bg-yellow {
          background: #ee9708;
        }
      }

      .label-item {
        display: flex;
        align-items: center;
        height: 35px;
        margin-bottom: 20px;

        .label-txt {
          width: 100px;
          text-align: left;
          margin-right: 10px;
        }
      }

      .label-item:last-child {
        margin-bottom: 0;
      }

      .logo-box {
        display: flex;
        margin-bottom: 25px;

        .label-txt {
          width: 100px;
          text-align: left;
          margin-right: 10px;
        }

        .logo-div {
          width: 90px;
          height: 90px;
          border: 1px solid rgba(255, 255, 255, 0.3);

          .companyLogo {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
      }

      .tab-class {
        color: #fff;
      }

      .search-box {
        display: flex;
        justify-content: space-between;
        height: 35px;
        margin-bottom: 20px;

        .add {
          font-size: 14px;
          color: #fff;
          background-color: #01c0e4;
          margin-left: 30px;
          // border: none;
        }
      }
    }

    .card-item:last-child {
      margin-right: 0;
    }
  }
}
</style>
